

import { useModel } from '@/.umi/plugin-model';
import { PauseOutlined, PlayCircleOutlined, PlaySquareOutlined, SoundOutlined, StepBackwardFilled, StepForwardFilled, UnorderedListOutlined } from '@ant-design/icons';
import { Affix, Col, Row,Image, Slider, Tooltip, Button } from 'antd';
import { Footer } from 'antd/es/layout/layout';
import React, { useState, useEffect, useRef } from 'react';

// import ReactHowler from '../ReactHowler'

const styles = {
  playerContainer: {
    position: 'fixed' as 'fixed',
    bottom: 0,
    left: 0,
    right: 0,
    backgroundColor: '#282c34',
    color: 'white',
    padding: '10px',
    display: 'flex',
    flexDirection: 'column' as 'column', 
    alignItems: 'center',
    boxShadow: '0 -2px 10px rgba(0,0,0,0.5)',
  },
  controls: {
    display: 'flex',
    justifyContent: 'space-between',
    width: '100%',
  },
  songInfo: {
    marginTop: '10px',
    textAlign: 'center' as 'center',
  },
  progressContainer: {
    width: '100%',
  },
  progressBar: {
    width: '100%',
  },
};


// const songs:API.SongVO[] = [
//   {
//     id: 1,
//     name: "1111",
//     singerName: "singnamee1111",
//     tags: "1111",
//     url: "1111",
//   },
//   {
//     id:2,
//     name:"2222",
//     singerName:"singnamee2222",
//     tags:"2222",
//     url:"2222"
//   },
//   {
//     id:3,
//     name:"3333",
//     singerName:"singnamee3333",
//     tags:"3333",
//     url:"3333"
//   },
//   {
//     id:4,
//     name:"4444",
//     singerName:"singnamee4444",
//     tags:"4444",
//     url:"4444"
//   },
//   {
//     id:5,
//     name:"5555",
//     singerName:"singnamee5555",
//     tags:"5555",
//     url:"5555"
//   },
// ];



interface MusicPlayerProps {
  
}

// 简略音乐播放栏
const MusicPlayer : React.FC<MusicPlayerProps>= () => {
  // const [isPlaying, setIsPlaying] = useState(false);
  // const [currentSongIndex, setCurrentSongIndex] = useState(0);
  // const [currentTime, setCurrentTime] = useState(0);
  // const [audio] = useState(new Audio(songs[currentSongIndex].url));
  // const [duration, setDuration] = useState(0);
  // const progressRef = useRef(null);

  // useEffect(() => {
  //   audio.src = songs[currentSongIndex].url;
  //   if (isPlaying) {
  //     audio.play();
  //   }

  //   audio.addEventListener('loadedmetadata', () => {
  //     setDuration(audio.duration);
  //   });

  //   audio.addEventListener('timeupdate', () => {
  //     setCurrentTime(audio.currentTime);
  //   });

  //   return () => {
  //     audio.pause();
  //     audio.src = "";
  //   };
  // }, [currentSongIndex]);

  // const togglePlay = () => {
  //   if (isPlaying) {
  //     audio.pause();
  //   } else {
  //     audio.play();
  //   }
  //   setIsPlaying(!isPlaying);
  // };

  // const handleNext = () => {
  //   setCurrentSongIndex((prevIndex) => (prevIndex + 1) % songs.length);
  //   setIsPlaying(false);
  // };

  // const handlePrev = () => {
  //   setCurrentSongIndex((prevIndex) =>
  //     (prevIndex - 1 + songs.length) % songs.length
  //   );
  //   setIsPlaying(false);
  // };

  // const handleProgressChange = (e: any) => {
  //   const newTime = (e.target.value / 100) * duration;
  //   audio.currentTime = newTime;
  //   setCurrentTime(newTime);
  // };

  // const {
  //   player,
  //   SetPlayer,
  //   audioRef,
  //   isPlaying,
  //   volume,
  //   currentSong,
  //   currentSongIndex,
  //   playList,
  //   duration,
  //   currentTime,
  //   // progress,
  //   showVolume,
  //   showStatus,

  //   //func
  //   Play,
  //   Pause,
  //   PlayOrPause,
  //   NextSong,
  //   PreviousSong,
  //   ChangeVolume,

  //   ChangeTime,
  //   // ChangeProgress,
  //   AddSong,
  //   SetShowVolume,
  //   ChangeShowStatus,
  // } = useModel('musicPlayerModel');



  return (
    <Affix offsetBottom={0}>
      <Footer className="player-warp">
        <Row justify="start" align="middle" style={{ height: '100%' }}>
        
          {/* <audio 
            ref={audioRef}
            src={"/api/song/file/"+currentSong.url}
            autoPlay
          /> */}

        {/* <ReactHowler
          src={['sound.ogg', 'sound.mp3']}
          playing={this.state.playing}
          onLoad={this.handleOnLoad}
          onPlay={this.handleOnPlay}
          onEnd={this.handleOnEnd}
          loop={this.state.loop}
          mute={this.state.mute}
          volume={this.state.volume}
          ref={(ref) => (this.player = ref)}
        /> */}





          <Col span={3} offset={1}>
            <div className="player-btn-group">
              <StepBackwardFilled onClick={()=>PreviousSong()} size={15}/>
              {
                isPlaying
                ? <PauseOutlined className="play" onClick={Pause} size={15}/>
                : <PlayCircleOutlined className="play" onClick={Play} size={15}/>
              }
              <StepForwardFilled onClick={()=>NextSong()} size={15} />
            </div>
          </Col>

          <Col span={15}>
            <Row align="middle">
              {/* song picture */}
              <Col span={3}>
                  {/* src={currentSong ? currentSong.img : ''} */}
                  <Image src={''} ></Image>
              </Col>
              <Col span={20}>
                <span>{currentSong ? currentSong.name : ''}</span>
                <Slider
                  min={0}
                  max={duration}
                  value={currentTime}
                  step={0.01}
                  style={{ margin: 0 }}
                  tooltipVisible={false}
                  onChange={(val) => ChangeTime(val)}>
                </Slider>
              </Col>
            </Row>
          </Col>

          <Col>
            <Tooltip title="播放列表">
              <Button
                onClick={()=> ChangeShowStatus(showStatus)}
                shape="circle"
                icon={<UnorderedListOutlined />}
                type="text"
              >
              </Button>
            </Tooltip>
            <Button 
              // onClick={() => SetShowVolume(!showVolume)}
              shape="circle"
              icon={<SoundOutlined />}
              type="text"
            ></Button>
          </Col>

          <Col span={2}>
            <Slider
              style={{ display: 'block' }}
              onChange={(val) => ChangeVolume(val)}
              value={volume}
              min={0}
              max={1}
              step={0.1}
              tooltipVisible={false}
            >
            </Slider>
          </Col>

        </Row>
      </Footer>
    </Affix>
  );
};



export default MusicPlayer;
